.vue {
    .region {
        width: 100%;
        height: 100px;
        text-align: center;
        margin-bottom: 10px;
        color: rgb(80, 80, 80);
        background: linear-gradient(to right, rgb(220, 237, 254), rgb(240, 246, 254), rgb(210, 231, 254));

        .header1 {
            font-size: 26px;
        }

        .header2 {
            margin-top: 0px;
            font-size: 15px;
            line-height: 30px;
        }
    }

    .data {
        width: 1300px;
        margin: 0 auto;

        .nodata {
            video {
                width: 68%;
                height: 620px;
                border-radius: 10px;
                background-color: #ffffff;
                box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
            }

            .option {
                float: right;
                width: 30%;
                height: 620px;
                border: none;
                overflow-x: hidden;
                overflow-y: auto;
                padding: 10px 15px 10px 15px;
                text-align: left;
                border-radius: 10px;
                box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
                background-color: #fbfdff;

                .title {
                    color: rgb(60, 60, 60);
                    font-size: 20px;
                    margin-bottom: 10px;

                    .type {
                        float: right;
                    }
                }

                .item {

                    .name {
                        margin: 0px 0 0 0;
                    }

                    .occupy {
                        margin: 10px 0 0 0;
                    }

                    .dateType {
                        float: left;
                        margin: 17px 0 0 0;
                    }

                    .sex {
                        float: right;
                        margin: 17px 0 0 0;
                    }

                    .date {
                        margin: 65px 0 20px 0;

                        .leapMonth {
                            float: right;
                        }
                    }

                    .other {
                        height: 45px;
                        display: flex;

                        .title {
                            font-size: 15px;
                            margin: 3px 10px 0px 0px;
                        }

                        .kuang {
                            flex: 1;

                            .select {
                                width: 100%;
                            }
                        }

                    }

                    .paipan {
                        .button {
                            font-size: 16px;
                            font-weight: bold;
                            width: 100%;
                            height: 40px;
                            border-radius: 40px;
                        }
                    }
                }

            }
        }

        .yesdata {
            .option {
                .button {
                    margin-right: 30px;
                }

                .button2 {
                    margin-left: 30px;
                }
            }

            .data {
                margin-top: 10px;

                .hrader {
                    width: 100%;
                    border: none;
                    color: white;
                    height: 50px;
                    line-height: 50px;
                    font-size: 16px;
                    margin-bottom: 10px;
                    padding: 0 30px 0 30px;
                    font-weight: bold;
                    border-radius: 5px;
                    background-size: cover;
                    animation: imgAnimation 5s infinite steps(100);

                    @keyframes imgAnimation {
                        0% {
                            background-image: url(@/assets/img/headerfooter/top1.png);
                        }

                        50% {
                            background-image: url(@/assets/img/headerfooter/top2.png);
                        }

                        100% {
                            background-image: url(@/assets/img/headerfooter/top1.png);
                        }
                    }

                    .name {
                        float: left;
                        font-size: 24px;
                    }

                    .date {
                        float: left;
                        font-size: 16px;

                        .other {
                            font-size: 14px;
                        }

                        .item {
                            font-size: 14px;
                            margin-left: 40px;
                        }
                    }

                    .shengxiao {
                        float: right;
                        height: 60px;
                        font-size: 20px;
                        color: #c39d4a;
                    }
                }

                .border {
                    width: 100%;
                    border-radius: 5px;
                    border: none;
                    padding: 5px;
                    min-height: 520px;
                    border: 2px rgb(220, 223, 230) solid;

                    .jichu {

                        .bgi1 {
                            background-image: linear-gradient(to right, rgb(249, 252, 254), rgb(235, 243, 254), rgb(249, 252, 254));
                        }

                        .bgi2 {
                            background-image: linear-gradient(to right, rgb(235, 245, 254), rgb(249, 252, 254), rgb(235, 245, 254));
                        }

                        .bgi3 {
                            margin: 10px 0 10px 0;
                            border: 1px rgb(220, 223, 230) solid;
                            background-color: rgba(255, 255, 255, 0.5);

                            .item {
                                .content {
                                    font-weight: bold;
                                    font-size: 16px;
                                    margin-left: 40%;
                                }
                            }
                        }

                        .go {
                            display: flex;
                            padding-left: 10px;
                            height: 30px;
                            line-height: 30px;

                            .item {
                                flex: 1;
                                display: flex;

                                .title {
                                    color: #727272;
                                    font-weight: bold;
                                    margin-right: 15px;
                                }

                                .mr-43 {
                                    margin-right: 43px;
                                }

                                .mr-29 {
                                    margin-right: 29px;
                                }
                            }
                        }

                        .row {
                            margin-top: 10px;

                            .gongwei {
                                height: 372px;
                                padding-top: 10px;
                                border: 1px rgb(220, 220, 220) solid;

                                .waige {
                                    margin-left: 80px;
                                    width: 370px;
                                    height: 350px;
                                    display: grid;
                                    grid-template-rows: repeat(3, 1fr);
                                    grid-template-columns: repeat(3, 1fr);
                                    background-color: rgb(251, 251, 251);

                                    >div {
                                        width: 150px;
                                        height: 110px;
                                        line-height: 110px;
                                        color: #323232;
                                        margin: 0px 10px 10px 0px;
                                        text-align: center;
                                        cursor: pointer;
                                        border: 1px rgba(200, 200, 200) solid;
                                        box-shadow: 0px 0px 5px 5px rgb(245, 245, 245);
                                        transition: 0.3s;
                                        border-radius: 5px;
                                    }

                                    >div:hover {
                                        transition: 0.3s;
                                        box-shadow: 0px 1px 5px 3px rgb(220, 220, 220);
                                    }

                                    .neige {
                                        display: grid;
                                        grid-template-rows: repeat(3, 1fr);
                                        grid-template-columns: repeat(3, 1fr);

                                        >div {
                                            height: 36px;
                                            line-height: 36px;
                                            font-size: 13px;

                                            .yiKong {
                                                .yiMa {}

                                                .xunKong {
                                                    margin-left: 1px;
                                                    color: #34c044;
                                                }
                                            }

                                            .core {
                                                float: left;
                                                margin-left: 1px;
                                            }

                                            .status {
                                                width: 20px;
                                                height: 16px;
                                                line-height: 22px;
                                                float: left;
                                                margin-left: 3px;
                                                color: #828282;
                                                font-size: 10px;
                                                margin-right: 1px;
                                                border-radius: 10px;

                                                .qin {
                                                    color: #323232;
                                                }
                                            }

                                            .dun {
                                                color: white;
                                                font-size: 12px;
                                                border-radius: 0px 4px 0px 4px;
                                                background-color: rgb(181, 147, 43);
                                            }

                                            .marki {
                                                height: 36px;
                                                line-height: 15px;
                                                font-weight: bold;
                                                font-size: 11px;
                                                background-color: rgb(240, 240, 240);
                                                border-radius: 0px 5px 0px 0px;
                                                padding-top: 3px;

                                                .angan {
                                                    color: rgb(150, 150, 150);
                                                }
                                            }

                                            .taji {
                                                padding-left: 12px;
                                                font-size: 16px;
                                            }
                                        }
                                    }
                                }
                            }

                            .qita {
                                min-height: 372px;
                                padding: 10px;
                                border: 1px rgb(220, 220, 220) solid;

                                .item1 {
                                    height: 190px;

                                    .title {
                                        color: #937e1d;
                                        font-size: 16px;
                                        margin: -5px 0 0 0;
                                    }

                                    .tip {
                                        float: right;
                                        height: 22px;
                                        line-height: 26px;
                                        font-size: 12px;
                                        color: rgb(170, 170, 170);
                                    }

                                    .divider {
                                        margin: -17px -10px -13px -10px;
                                    }

                                    .dangong {
                                        float: left;
                                        margin-right: 20px;

                                        .title1 {
                                            text-align: center;
                                            width: 110px;
                                            height: 26px;
                                            line-height: 24px;
                                            margin-top: 5px;
                                            background-color: rgb(251, 251, 251);
                                            border: 1px rgba(0, 0, 0, 0.26) solid;
                                            border-radius: 5px;
                                        }

                                        .small {
                                            display: grid;
                                            height: 110px;
                                            width: 110px;
                                            background-color: rgb(251, 251, 251);
                                            border: 1px rgba(0, 0, 0, 0.26) solid;
                                            grid-template-columns: repeat(3, 1fr);
                                            grid-template-rows: repeat(3, 1fr);
                                            border-radius: 5px;

                                            >div {
                                                width: 35px;
                                                line-height: 35px;
                                                text-align: center;
                                                font-size: 13px;

                                                .dun {
                                                    width: 36px;
                                                    color: white;
                                                    font-size: 12px;
                                                    border-radius: 0px 4px 0px 4px;
                                                    background-color: rgb(181, 147, 43);
                                                }

                                                .yiKong {
                                                    .yiMa {}

                                                    .xunKong {
                                                        margin-left: 1px;
                                                        color: #34c044;
                                                    }
                                                }
                                            }
                                        }
                                    }

                                    .yueling {
                                        float: left;
                                        margin-right: 20px;

                                        .title1 {
                                            text-align: center;
                                            width: 110px;
                                            margin-top: 5px;
                                            height: 26px;
                                            line-height: 24px;
                                            border: 1px rgba(0, 0, 0, 0.26) solid;
                                            background-color: rgb(251, 251, 251);
                                            border-radius: 5px;
                                        }

                                        .small {
                                            display: grid;
                                            height: 110px;
                                            width: 110px;
                                            border: 1px rgba(0, 0, 0, 0.26) solid;
                                            background-color: rgb(251, 251, 251);
                                            border-radius: 5px;

                                            >div {
                                                width: 110px;
                                                line-height: 35px;
                                                text-align: center;
                                                font-size: 13px;
                                            }
                                        }
                                    }
                                }

                                .keying {
                                    margin-top: 10px;
                                    min-height: 150px;
                                    border: rgb(220, 220, 220) 1px solid;
                                    background-color: #fbfbfb;
                                    background-size: 400%;

                                    .tag {
                                        text-align: center;
                                        min-width: 130px;
                                        margin: 0 10px 5px 10px;
                                    }

                                    .item {
                                        vertical-align: 2px;
                                        margin: 0 0 5px 0;
                                    }

                                    .null {
                                        color: rgb(150, 150, 150);
                                        text-align: center;
                                        margin-top: 30px;
                                    }

                                }
                            }

                        }

                    }

                    .gengduo {}

                }
            }
        }
    }
}